<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>


    <el-card class="box-card" :model="aboutProject.baseProjectInfo" >
      <div slot="header" style=" height: 30px;" class="clearfix">
        <span style="font-size:25px; display: inline-block;" >{{aboutProject.baseProjectInfo.proName}}</span><br><br>

        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div class="text item">
        <span style="font-size: 16px;">项  目  组: {{aboutProject.baseProjectInfo.teamName}}
          ({{aboutProject.baseProjectInfo.userArr}})</span><br><br>
        <span style="font-size: 16px;">项目描述: {{aboutProject.baseProjectInfo.proDescribe}}</span>
      </div>
    </el-card>

      <el-card class="box-card" :model="aboutProject.baseProjectInfo" >
        <div slot="header" style="height: 30px" class="clearfix">
          <span style="font-size:20px; display: inline-block;" >需求数: {{aboutProject.baseProjectInfo.reqCount}}</span><br><br>
        </div>
        <div class="text item">
          <div class="text item">
            <el-table
                    title="需求数"
                    span-method="row, column,6,1 "
                    v-loading="listLoading"
                    :data="list"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row>
              <el-table-column label="编号" width="80" align="center">
                <template scope="scope">
                  <span>{{ scope.$index + 1 }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="proName" label="项目名称" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="text"
                             content="查看详情"
                             @click="projectDetail(scope.row.id)"
                  >{{scope.row.proName}}</el-button>
                </template>
              </el-table-column>

              <el-table-column prop="proDescribe" label="项目简介" width="250" align="center"/>
              <el-table-column prop="teamName" label="项目组" width="150" align="center"/>
              <el-table-column prop="userArr" label="成员" width="250" align="center"/>
              <el-table-column prop="reqNum" label="需求数" width="80" align="center"/>
              <el-table-column prop="taskNum" label="任务数" width="80" align="center"/>
              <el-table-column prop="newStageResultDescribe" label="最新成果" width="150" align="center">
                <template slot-scope="scope">
                  <el-button type="text"
                             content="查看详情"
                             @click="projectResultDetails(scope.row.newStageResultId)"
                  >{{scope.row.newStageResultDescribe}}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button
                          type="primary"
                          icon="el-icon-edit"
                          circle
                          size="mini"
                          @click="handleEdit(scope.row.id)"
                  />
                  <el-button
                          type="danger"
                          icon="el-icon-delete"
                          circle
                          size="mini"
                          @click="openDeleteConfirm(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
        </div>
        </div>
      </el-card>

    <el-form :model="aboutProject" :rules="rules" ref="aboutProject" label-width="100px" class="demo-aboutProject">
      <el-form-item label="知识点名称" prop="knowledge">
        <el-input v-model="aboutProject.knowledge"></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectId">
        <el-input v-model="aboutProject.projectId"></el-input>
      </el-form-item>
      <el-form-item label="知识点类别" prop="knowType">
        <el-input v-model="aboutProject.knowType"></el-input>
      </el-form-item>
      <el-form-item label="知识点简介" prop="knowDes">
        <el-input v-model="aboutProject.knowDes"></el-input>
      </el-form-item>
      <el-form-item label="知识点图片" prop="knowUrl">
        <el-image :src="aboutProject.knowUrl"></el-image>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aboutProject: {
        id: '',
        knowledge: '',
        projectId: '',
        knowType: '',
        knowDes: '',
        knowUrl: '',
        list: [],
        listLoading: true,
        baseProjectInfo:{proName:"项目开发管理平台", proDescribe:"巴拉巴拉巴拉巴拉",
        userArr:"张三,李四,王文武,赵六", teamName:"2207班1组",reqCount:16}
      }
    };
  },
  methods: {
    loadProjectList() {
      console.log('loadProjectList');
      let url = 'http://localhost:8989/projects/list';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.projectListOptions = responseBody.data;
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    loadKnow(id) {
      console.log('loadKnow');
      let url = 'http://localhost:8989/knows/' + id + '/know';
      console.log('url = ' + url);
      this.listLoading = true;
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.aboutProject = responseBody.data;
        this.listLoading = false;
      })
    }
  },
  mounted() {
    this.aboutProject.id = this.$route.query.id;
    console.log(this.aboutProject.id);
    this.loadKnow(this.aboutProject.id);
    this.loadProjectList();
  }
}
</script>

<style>

</style>